<template>
    <div class="tinymce-editor">
      <Editor
        v-model="content"
        :init="initOptions"
        @onInit="handleInit"
      />
    </div>
  </template>
  
  <script setup>
  import Editor from '@tinymce/tinymce-vue';
import { ref, watch } from 'vue';
  
  const props = defineProps({
    modelValue: {
      type: String,
      default: ''
    },
    init: {
      type: Object,
      default: () => ({})
    }
  });
  
  const emit = defineEmits(['update:modelValue', 'init']);
  
  const content = ref(props.modelValue);
  
  watch(() => props.modelValue, (newVal) => {
    content.value = newVal;
  });
  
  watch(content, (newVal) => {
    emit('update:modelValue', newVal);
  });
  
  const handleInit = (evt, editor) => {
    emit('init', editor);
  };
  
  const initOptions = ref({
    ...props.init,
    base_url: '/tinymce', // 指向自托管目录
    suffix: '.min',       // 使用压缩版文件
  });
  </script>
  
  <style scoped>
  .tinymce-editor {
    margin: 20px 0;
  }
  </style>